<template>
  <el-dialog
    v-model="inShow"
    title="客户银行账号"
    :before-close="handleClose"
  >
    <div style="margin-bottom: 8px">
      <el-button
        type="primary"
        @click="pushNewData"
      > 新增 </el-button>
      <el-button
        type="danger"
        @click="deleteData"
      > 删除 </el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="btnLoading"
      >
        保存
      </el-button>
    </div>
    <el-table
      stripe
      border
      size="small"
      :data="tableData.data"
      :cell-class-name="tableCellClassName"
      v-loading="tableData.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
      />
      <el-table-column label="币种">
        <template #default="scope">
          <div v-if="scope.row.index === rowIndex">
            <selectDown
              v-model:modelData="scope.row.currency"
              placeholder="请输入后搜索"
              urlType="currency"
            >
            </selectDown>
          </div>
          <span v-else>
            {{ scope.row.currency }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="收款户名">
        <template #default="scope">
          <div v-if="scope.row.index === rowIndex">
            <el-input
              v-model="scope.row.accountName"
              size="small"
            > </el-input>
          </div>
          <span v-else>
            {{ scope.row.accountName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="银行账号">
        <template #default="scope">
          <div v-if="scope.row.index === rowIndex">
            <el-input
              v-model="scope.row.bankAccount"
              size="small"
            > </el-input>
          </div>
          <span v-else>
            {{ scope.row.bankAccount }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="开户银行">
        <template #default="scope">
          <div v-if="scope.row.index === rowIndex">
            <el-input
              v-model="scope.row.bankName"
              size="small"
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.bankName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template #default="scope">
          <div v-if="scope.row.index === rowIndex">
            <el-input
              v-model="scope.row.memo"
              size="small"
            > </el-input>
          </div>
          <span v-else>
            {{ scope.row.memo }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import selectDown from "./selectDown.vue";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    selectDown,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:show"],
  computed: {
    inShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引

      btnLoading: false,
      tableData: {
        data: [],
        loading: false,
      },
      copyData: [],

      selectData: [],
    };
  },
  methods: {
    handleClose(done) {
      done();
      // ElMessageBox.confirm("退出前请先保存！", {
      //   confirmButtonText: '确认',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      //   draggable: true,
      // })
      //   .then(() => {
      //     done();
      //   })
      //   .catch(() => { });
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
    },
    handleSelectionChange(selection) {
      this.selectData = selection;
    },
    // initData() {
    //   this.tableData.loading = true
    //   this.$http
    //     .get("/api/buenterprisebank/query", {
    //       EntId: this.$route.query.entId,
    //     })
    //     .then((res) => {
    //       this.tableData.data = res;
    //       this.copyData = res;
    //     }).finally(() => this.tableData.loading = false);
    // },
    pushNewData() {
      this.tableData.data.push({
        entId: this.$route.query.entId,
        currency: "",
        accountName: "",
        bankAccount: "",
        bankName: "",
        memo: "",
      });
    },
    deleteData() {
      let newArray = [];
      this.tableData.data.forEach((t) => {
        if (!this.selectData.find((item) => t == item)) {
          newArray.push(t);
        }
      });
      this.tableData.data = newArray;
    },
    // validData() {
    //   for (let i of this.tableData.data) {
    //     for (let j of Object.keys(i)) {
    //       if (j == "currency" || j == "accountName" || j == "bankAccount" || j == "bankName" || j == "entId") {
    //         if (!i[j]) {
    //           return false;
    //         }
    //       } else {
    //         continue;
    //       }
    //     }
    //   }
    //   return true;
    // },
    // save() {
    //   if (this.tableData.data.length == 0) {
    //     this.$message.warning("表格中没有数据");
    //     return;
    //   }
    //   if (this.validData()) {
    //     let newFormData = JSON.parse(JSON.stringify(this.tableData.data));
    //     newFormData.forEach((t) => {
    //       delete t.index;
    //     });
    //     // 判断列表数据是否存在币种，收款户名，银行账号，开户账户是否有完全相同的数据
    //     let hasSameObj = false;
    //     for (let i = 0; i < newFormData.length; i++) {
    //       hasSameObj = false;
    //       let checkObj = newFormData[i];
    //       for (let j = i + 1; j < newFormData.length; j++) {
    //         let sigleObj = newFormData[j];
    //         if (checkObj.currency == sigleObj.currency && checkObj.accountName == sigleObj.accountName && checkObj.bankAccount == sigleObj.bankAccount && checkObj.bankName == sigleObj.bankName) {
    //           hasSameObj = true;
    //           break;
    //         };
    //       };
    //       if (hasSameObj) {
    //         break;
    //       };
    //     };
    //     if (hasSameObj) {
    //       this.$message.warning("列表数据存在两条相同的数据");
    //       return;
    //     };
    //     this.btnLoading = true;
    //     this.$http
    //       .post("/api/buenterprisebank/save", {
    //         bankList: newFormData,
    //       })
    //       .then((res) => {
    //         if (res.status) {
    //           this.$message.success(res.message);
    //         } else {
    //           this.$message.error(res.message);
    //         }
    //       })
    //       .finally(() => (this.btnLoading = false));
    //   } else {
    //     this.$message.warning(
    //       "数据中存在币种、收款户名、银行账号、开户账号为空"
    //     );
    //   }
    // },
  },
  watch: {
    inShow(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // this.initData();
        });
      }
    },
  },
  mounted() {
    
  },
});
</script>

<style lang="scss" scoped></style>
